import 'package:flutter/material.dart';

class TimeAxisVerticalWidget extends StatefulWidget {
  final Color topColor;
  final Color centerColor;
  final Color bottomColor;
  final Color textColor;
  final Function itemClick;
  final List dataList;

  static const Color lineColor = Color(0xFFDFDFDF);
  static const Color circleColor = Color(0xFF999999);

  TimeAxisVerticalWidget(this.dataList,
      {this.topColor = lineColor,
      this.centerColor = circleColor,
      this.bottomColor = lineColor,
      this.textColor = Colors.black,
      this.itemClick});

  @override
  TimeAxisVerticalState createState() => TimeAxisVerticalState();
}

class TimeAxisVerticalState extends State<TimeAxisVerticalWidget> {
  double itemHeight = 0.0;
  List<GlobalKey> _keys;
  List itemHeights = List();

  @override
  void initState() {
    super.initState();
    _keys = List<GlobalKey>.generate(
      widget.dataList.length,
      (int i) => GlobalKey(),
    );
    WidgetsBinding widgetsBinding = WidgetsBinding.instance;
    for (int i = 0; i < widget.dataList.length; i++) {
      widgetsBinding.addPostFrameCallback((callback) {
        ///获取相应控件的size
        RenderObject renderObject = _keys[i].currentContext.findRenderObject();
        setState(() {
          itemHeights.insert(i, renderObject.semanticBounds.size.height);
        });
      });
    }

    ///监听是否渲染完
  }

  Widget _getItemsWidget(int index) {
    return Container(
      key: _keys[index],
      color: Colors.white,
      padding: EdgeInsets.only(left: 12, right: 16),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          ///左侧的线
          Container(
            width: 3,
            margin: EdgeInsets.only(right: 10),
            height: index < itemHeights.length ? itemHeights[index] : 0,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  width: 1,
                  height: 10,
                  color: index == 0 ? Colors.transparent : widget.topColor,
                ),
                Container(
                  height: 3,
                  width: 3,
                  decoration: BoxDecoration(
                    color: widget.centerColor,
                    borderRadius: BorderRadius.all(Radius.circular(3)),
                  ),
                ),
                Expanded(
                    child: Container(
                  width: 1,
                  color: index == widget.dataList.length - 1
                      ? Colors.transparent
                      : widget.bottomColor,
                )),
              ],
            ),
          ),

          ///右侧的文案
          Expanded(
            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Text(
                      widget.dataList[index].firstTitle != null
                          ? widget.dataList[index].firstTitle
                          : '',
                      style: TextStyle(
                          fontSize: 15,
                          color: Color(0xFF333333),
                          fontWeight: FontWeight.bold),
                    ),
                    Container(
                      margin: EdgeInsets.only(left: 10),
                      child: Text(
                        widget.dataList[index].secondTitle != null
                            ? widget.dataList[index].secondTitle
                            : '',
                        style: TextStyle(
                            fontSize: 15,
                            color: Color(0xFF333333),
                            fontWeight: FontWeight.bold),
                      ),
                    ),
                    Expanded(
                        child: GestureDetector(
                      onTap: () {
                        if (widget.itemClick != null) {
                          widget.itemClick(index);
                        }
                      },
                      child: Text(
                        "查看详情",
                        textAlign: TextAlign.right,
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
//                      padding: EdgeInsets.only(right: 16),
                    )),
                  ],
                ),
                SizedBox(
                  height: 12,
                ),
                Container(
                  child: Text(widget.dataList[index].time != null
                      ? widget.dataList[index].time
                      : ''),
                ),
                SizedBox(
                  height: 7,
                ),
                Container(
                  child: Text(widget.dataList[index].describe != null
                      ? widget.dataList[index].describe
                      : ''),
                ),
                SizedBox(
                  height: 32,
                ),
              ],
              crossAxisAlignment: CrossAxisAlignment.start,
            ),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> widgetList = List();
    for (int i = 0; i < widget.dataList.length; i++) {
      widgetList.add(_getItemsWidget(i));
    }
    return Column(
      children: widgetList,
    );
  }
}
